/**
* 左边菜单
*/ 
<template>
<el-menu :collapse="collapsed" collapse-transition :default-openeds="openeds" router :default-active="defaultActive" :unique-opened="false" class="el-menu-vertical-demo" background-color="#0276FE" text-color="#fff">
    <div class="logobox">
        <div><img class="logoimg" src="../assets/img/logo.png" alt="" /></div>
        <div class="logo_text"><span>群思网络</span></div>
    </div>
    <div v-for="menu in allmenu" :key="menu.menuid" :index="menu.menuid" style="text-align: center; margin-right: 10px">
        <!-- 一级导航列 -->
        <el-menu-item v-if="menu.menus === null" :index="menu.url">
            <i class="iconfont" :class="menu.icon"></i>
            <span slot="title">{{ menu.menuname }}</span>
        </el-menu-item>
        <!-- 存在的二级导航列 -->
        <el-submenu v-else :index="menu.menuid">
            <template slot="title">
                <i class="iconfont" :class="menu.icon"></i>
                <span>{{ menu.menuname }}</span>
            </template>
            <el-menu-item-group>
                <el-menu-item v-for="chmenu in menu.menus" :index="chmenu.url" :key="chmenu.menuid">
                    <span>{{ chmenu.menuname }}</span>
                </el-menu-item>
            </el-menu-item-group>
        </el-submenu>
    </div>
</el-menu>
</template>

<script>
export default {
    name: "leftnav",
    data() {
        return {
            collapsed: false,
            allmenu: [],
            defaultActive: "",
            // 默认展开菜单的下标
            openeds: ["1", "2", "3", "4"],
        };
    },
    watch: {
        $route: {
            immediate: true,
            handler(to) {
                this.defaultActive = to.path; // 给defaultActive重新赋值为当前组件的路由地址
            },
        },
    },
    // 创建完毕状态(里面是操作)
    created() {
        let that = this;
        let res = {};
        if (this.$store.state.systemLayer == "front") {
            // 前台
            res = {
                success: true,
                data: [{
                        menuid: "1",
                        icon: "icon-a-gongzuotaigongzuozhuo-02",
                        menuname: "工作台",
                        imgurl: require("../assets/img/column.png"),
                        hasThird: "N",
                        url: "/statistics",
                        menus: null,
                    },
                    {
                        menuid: "2",
                        icon: "icon-kehu-copy",
                        menuname: "客户",
                        imgurl: require("../assets/img/column.png"),
                        hasThird: "N",
                        url: "customer",
                        menus: [{
                                menuid: "2-1",
                                icon: "icon-provider-manage",
                                menuname: "联系人",
                                imgurl: "",
                                hasThird: "N",
                                url: "/customer/contactsList",
                                menus: null,
                            },
                            {
                                menuid: "2-2",
                                icon: "icon-provider-manage",
                                menuname: "外部联系人",
                                imgurl: "",
                                hasThird: "N",
                                url: "/customer/externalContacts",
                                menus: null,
                            },
                            {
                                menuid: "2-3",
                                icon: "icon-provider-manage",
                                menuname: "企业",
                                imgurl: "",
                                hasThird: "N",
                                url: "/customer/enterprise",
                                menus: null,
                            },
                            {
                                menuid: "2-4",
                                icon: "icon-provider-manage",
                                menuname: "公海",
                                imgurl: "",
                                hasThird: "N",
                                url: "/customer/highSeas",
                                menus: null,
                            },
                            {
                                menuid: "2-5",
                                icon: "icon-provider-manage",
                                menuname: "客户群",
                                imgurl: "",
                                hasThird: "N",
                                url: "/customer/customerBase",
                                menus: null,
                            },
                            {
                                menuid: "2-6",
                                icon: "icon-provider-manage",
                                menuname: "回收站",
                                imgurl: "",
                                hasThird: "N",
                                url: "/customer/recycleBin",
                                menus: null,
                            },
                            {
                                menuid: "2-7",
                                icon: "icon-provider-manage",
                                menuname: "客户设置",
                                imgurl: "",
                                hasThird: "N",
                                url: "/customer/customerSetup",
                                menus: null,
                            },
                            {
                                menuid: "2-8",
                                icon: "icon-provider-manage",
                                menuname: "客户分析",
                                imgurl: "",
                                hasThird: "N",
                                url: "/customer/cAnalysis",
                                menus: null,
                            },
                        ],
                    },
                    {
                        menuid: "3",
                        icon: "icon-caidanlan-xiaoshou",
                        menuname: "销售",
                        imgurl: require("../assets/img/column.png"),
                        hasThird: "N",
                        url: "customer",
                        menus: [{
                                menuid: "3-1",
                                icon: "icon-provider-manage",
                                menuname: "销售目标",
                                imgurl: "",
                                hasThird: "N",
                                url: "/sale/target",
                                menus: null,
                            },
                            {
                                menuid: "3-2",
                                icon: "icon-provider-manage",
                                menuname: "销售机会",
                                imgurl: "",
                                hasThird: "N",
                                url: "/sale/opportunity",
                                menus: null,
                            },
                            {
                                menuid: "3-3",
                                icon: "icon-provider-manage",
                                menuname: "销售设置",
                                imgurl: "",
                                hasThird: "N",
                                url: "/sale/salesSettings",
                                menus: null,
                            },
                            {
                                menuid: "3-4",
                                icon: "icon-provider-manage",
                                menuname: "工作记录",
                                imgurl: "",
                                hasThird: "N",
                                url: "/sale/workRecord",
                                menus: null,
                            },
                        ],
                    },
                    {
                        menuid: "4",
                        icon: "icon-caidanlan-xiaoshou",
                        menuname: "系统管理",
                        imgurl: require("../assets/img/column.png"),
                        hasThird: "N",
                        url: "customer",
                        menus: [{
                                menuid: "4-2",
                                icon: "icon-zuzhijiagou",
                                menuname: "组织架构",
                                imgurl: require("../assets/img/column.png"),
                                hasThird: "N",
                                url: "/framework/framework",
                                menus: null,
                            },
                            {
                                menuid: "4-3",
                                icon: "icon-qunfengjiaosequanxian",
                                menuname: "角色权限",
                                imgurl: require("../assets/img/column.png"),
                                hasThird: "N",
                                url: "/jurisdiction/jurisdiction",
                                menus: null,
                            },
                            {
                                menuid: "4-4",
                                icon: "icon-biaoqianku",
                                menuname: "标签管理",
                                imgurl: require("../assets/img/column.png"),
                                hasThird: "N",
                                url: "/labelLibrary/labelLibrary",
                                menus: null,
                            },
                            {
                                menuid: "4-5",
                                icon: "icon-dengji",
                                menuname: "企业等级管理",
                                imgurl: require("../assets/img/column.png"),
                                hasThird: "N",
                                url: "/enterpriseLevel/enterpriseLevel",
                                menus: null,
                            },
                            {
                                menuid: "4-6",
                                icon: "icon-laiyuan",
                                menuname: "客户来源管理",
                                imgurl: require("../assets/img/column.png"),
                                hasThird: "N",
                                url: "/customerSource/customerSourceList",
                                menus: null,
                            },
                            {
                                menuid: "4-7",
                                icon: "icon-mingdangenjin",
                                menuname: "跟进状态管理",
                                imgurl: require("../assets/img/column.png"),
                                hasThird: "N",
                                url: "/followUp/followUpList",
                                menus: null,
                            },
                            {
                                menuid: "4-8",
                                icon: "icon-xiaoshou-",
                                menuname: "销售阶段管理",
                                imgurl: require("../assets/img/column.png"),
                                hasThird: "N",
                                url: "/salesStage/salesStageList",
                                menus: null,
                            },
                        ],
                    },
                ],
                msg: "success",
            };
        }
        this.allmenu = res.data;
        // 监听
        this.$root.Bus.$on("toggle", (value) => {
            this.collapsed = !value;
        });
    },
    methods: {
        activeMenu() {
            let route = this.$route;
            let path = "";
            path = route.meta.menuPath ? route.meta.menuPath : route.path;
            return path;
        },
    },
};
</script>

<style scoped>
.iconfont {
    color: #fff;
}

.menuimg {
    margin-right: 10px;
}

/deep/ .el-submenu>.el-submenu__title {
    padding-left: 0px !important;
}

/* 二级鼠标经过 */
/deep/ .el-submenu>.el-submenu__title {
    color: #fff;
    font-size: 12px;
    height: 50px;
    line-height: 50px;
    padding-left: 20px !important;
}

/*二级导航默认*/
#navs {
    padding: 0 !important;
    width: 100%;
}

/deep/.el-menu-vertical-demo {
    /* background-color: #031a3d; */
    background-color: #0276fe;
}

.el-menu-vertical-demo {
    box-sizing: border-box;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    min-height: 400px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    border: none;
    text-align: left;
}

/deep/ .el-submenu__title:hover {
    background-color: #021532;
}

/deep/ .el-menu-item-group__title {
    padding: 0px;
}

.el-menu-bg {
    background-color: #1f2d3d !important;
}

.el-menu {
    border: none;
}

.logobox {
    text-align: center;
    margin-top: 1rem;
}

.logobox img {
    height: auto;
    max-height: 50%;
    margin: 1rem 0 0 0;
}

.logo_text {
    font-weight: bolder;
    color: #ffff;
    margin-bottom: 50px;
}

.el-menu-item.is-active {
    background-color: #1880fb !important;
    color: #fff;

    span {
        color: #fff !important;
    }
}

.el-menu-item i {
    color: #fff;
}

/deep/ .el-icon-arrow-down:before {
    color: #fff;
}
</style>
